<!-- 返还方式组件 -->
<template>
  <view class="returnBox">
    <nut-popup position="bottom" closeable round :style="{ height: '65%' }" @click-close-icon="sendRuturnTypeMsg(0)" v-model:visible="props.showRound">
      <nut-cell title="返还方式"></nut-cell>
      <nut-cell class="sendTypeBox">
        <nut-radio-group class="btn_box" v-model="radioVal" direction="horizontal" @change="handleChange">
          <nut-radio shape="button" label="1">会员卡</nut-radio>
          <nut-radio shape="button" label="2">银行卡</nut-radio>
          <nut-radio shape="button" label="3">微信</nut-radio>
          <nut-radio shape="button" label="4">支付宝</nut-radio>
        </nut-radio-group>
      </nut-cell>
      <view v-if="radioVal == '1'">
        <nut-cell>
          <p class="title flex_start"><span>会员卡号</span><span class="dot">*</span></p>
          <!-- <nut-input class="input" :border="false" readonly v-model="btcaId" @click-input="blurInput" placeholder=""></nut-input> -->
          <span>{{ btcaId || '123456' }}</span>
        </nut-cell>
      </view>
      <view v-if="radioVal == '2'">
        <!-- <nut-cell> 
        <span>账户类型</span>
        <nut-radio-group v-model="radioVal" text-position="left" direction="horizontal">
          <nut-radio label="1">个人账户</nut-radio>
          <nut-radio label="2">企业账户</nut-radio>
        </nut-radio-group>
       </nut-cell> -->
        <nut-cell>
          <p class="title flex_start"><span>银行卡号</span><span class="dot">*</span></p>
          <nut-input class="input" :border="false" v-model="accountNo" @click-input="blurInput" placeholder="请输入或选择银行卡号"></nut-input>
          <view @click="pickerShow = true" class="flex_start">
            <span>{{ accountNo ? '' : '选择' }}</span>
            <IconFont name="rect-right"></IconFont>
          </view>
        </nut-cell>
        <nut-cell>
          <p class="title flex_start"><span>收款人</span><span class="dot">*</span></p>
          <nut-input v-if="accountNameEdit" class="input" :border="false" v-model="accountName" placeholder="请输入收款人"></nut-input>
          <nut-input v-if="!accountNameEdit" class="input" readonly :border="false" v-model="accountName" placeholder="请输入收款人"></nut-input>
        </nut-cell>
        <nut-cell>
          <p class="title flex_start"><span>银行类别</span><span class="dot">*</span></p>
          <nut-input v-if="bankSubNameEdit" class="input" :border="false" v-model="bankSubName" placeholder="请输入银行类别"></nut-input>
          <nut-input v-if="!bankSubNameEdit" class="input" readonly :border="false" v-model="bankSubName" placeholder="请输入银行类别"></nut-input>
        </nut-cell>
        <nut-cell>
          <p class="title flex_start"><span>开户行</span><span class="dot">*</span></p>
          <nut-input v-if="bankNameEdit" class="input" :border="false" v-model="bankName" placeholder="请输入或选择开户行"></nut-input>
          <nut-input v-if="!bankNameEdit" class="input" readonly :border="false" v-model="bankName" placeholder="请输入或选择开户行"></nut-input>
          <view v-if="bankNameEdit" @click="toBankPage" class="flex_start">
            <span>选择</span>
            <IconFont name="rect-right"></IconFont>
          </view>
        </nut-cell>
      </view>

      <!-- 微信/支付宝返还 -->
      <nut-cell v-if="radioVal == '3' || radioVal == '4'">
        <p class="title flex_start"><span>手机号</span><span class="dot">*</span></p>
        <nut-input class="input" :border="false" v-model="phone" placeholder="请输入手机号"></nut-input>
      </nut-cell>

      <nut-popup position="bottom" :style="{ height: '60%' }" v-model:visible="pickerShow">
        <nut-picker :columns="bankList" title="选择银行卡号" @confirm="confirm" @cancel="pickerShow = false"></nut-picker>
      </nut-popup>

      <nut-button class="btn" block type="primary" color="#0966ff" @click="sendRuturnTypeMsg(1)">确定</nut-button>
    </nut-popup>
  </view>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import Taro, { useDidShow } from '@tarojs/taro'
import { IconFont } from '@nutui/icons-vue-taro'
import { getBankCard } from '@/@api/wait' // 待确认页面接口

// 获取开户行列表页选择的开户行数据
useDidShow(() => {
  let pages = Taro.getCurrentPages()
  let currPage = pages[pages.length - 1]
  if (currPage.__data__.bankName) {
    bankName.value = currPage.__data__.bankName
  }
  initBankCard() // 初始化银行卡号列表
})

const props = defineProps<{
  showRound: boolean
  phone: string // 发货人手机号
}>()

const emit = defineEmits(['sendRuturnTypeMsg'])

const radioVal = ref('2') // 选中的label

const accountName = ref('') // 户名
const bankName = ref('') // 开户行
const accountNo = ref('') // 银行卡号
const bankSubName = ref('') // 银行类别也要传 但是没用到
const phone = ref('') // 微信支付宝返还
const pickerShow = ref(false) // 银行卡号选择显隐
const bankList = ref<any>([]) // 银行卡列表数据
const btcaId = ref('') // 会员卡号

const accountNameEdit = ref(true) // 默认非只读
const bankSubNameEdit = ref(true) // 默认非只读
const bankNameEdit = ref(true) // 默认非只读

// 跳转到bankPage页面
const toBankPage = () => {
  Taro.navigateTo({
    url: `./bankPage`
  })
}

// 监听输入框
const blurInput = () => {
  accountNameEdit.value = true // 可编辑
  bankSubNameEdit.value = true // 可编辑
  bankNameEdit.value = true // 可编辑
}

// 如果是1就调接口获取会员卡号
const handleChange = (value: any) => {
  // console.log(value, props.phone, '判断是否选中1')
  getbtcaId()
}

// 监听手机号获取会员卡
watch(
  () => props.phone,
  (newVal) => {
    getbtcaId()
  },
  { immediate: true, deep: true }
)

// 根据手机号获取是否有会员卡号
async function getbtcaId() {
  const res = await getBankCard({ phone: props.phone })
  if (res.data.code == 200) {
    btcaId.value = res.data.data.btcaId
    // console.log(res.data.data.btcaId, '根据手机号获取是否有会员卡号')
  } else {
    btcaId.value = '无会员卡号信息'
  }
}

// 查询银行卡号列表
async function initBankCard() {
  const res = await getBankCard({})
  if (res.data.code == 200) {
    // 银行卡号列表数据 银行卡号 银行卡类别 收款人名称 开户行
    bankList.value = res.data.data.map((item) => {
      return {
        text: item.accountNo,
        value: item.accountNo,
        accountNo: item.accountNo, // 银行卡号
        accountName: item.accountName, // 收款人名称
        bankSubName: item.bankSubName, // 银行类别
        bankName: item.bankName // 开户行
      }
    })
    // console.log(bankList.value, '查询银行卡号列表')
  } else {
    Taro.showToast({
      icon: 'error',
      title: res.data.msg
    })
  }
}

// 确定回显卡号
const confirm = ({ selectedValue, selectedOptions }) => {
  const bankCount = selectedOptions.map((val) => val.text).join(',')
  accountNo.value = bankCount
  // console.log(bankList.value, '确定回显卡号')
  const filteredArray = bankList.value.filter(function (obj) {
    return obj.accountNo == bankCount
  })
  // 把其他信息回显到 银行类别 收款人名称 开户行上面
  const bankInfo = JSON.parse(JSON.stringify(filteredArray))
  // console.log(bankInfo[0], '回显卡号的其它信息')
  accountName.value = bankInfo[0].accountName
  bankName.value = bankInfo[0].bankName
  bankSubName.value = bankInfo[0].bankSubName
  accountNameEdit.value = false // 不可编辑
  bankSubNameEdit.value = false // 不可编辑
  bankNameEdit.value = false // 不可编辑
  pickerShow.value = false
}

// 回传数据返还方式以及对应的数据
const sendRuturnTypeMsg = (flag) => {
  if (flag) {
    let sendData
    if (radioVal.value == '1') {
      if (btcaId.value == '无会员卡号信息') {
        Taro.showToast({
          icon: 'error',
          title: '无会员信息'
        })
        return
      } else {
        sendData = {
          returnType: 1, // 会员卡返还
          btcaId: btcaId.value // 会员卡号
        }
      }
    } else if (radioVal.value == '2') {
      if (!accountName.value || !accountNo.value || !bankName.value) {
        Taro.showToast({
          icon: 'error',
          title: '银行卡信息不全'
        })
        return
      } else {
        sendData = {
          returnType: 2, // 银行返还
          accountName: accountName.value, // 收款人
          accountNo: accountNo.value, // 银行卡号
          bankName: bankName.value, // 开户行
          bankSubName: bankSubName.value // 银行类别
        }
      }
    } else if (radioVal.value == '3') {
      if (!phone.value) {
        Taro.showToast({
          icon: 'error',
          title: '请填写手机号'
        })
        return
      } else {
        const phoneRegex = /^1[3456789]\d{9}$/
        if (!phoneRegex.test(phone.value)) {
          Taro.showToast({
            title: '手机号格式错误',
            icon: 'error',
            duration: 1000
          })
          return
        }
        sendData = {
          returnType: 3, // 微信返还
          phone: phone.value // 手机号
        }
      }
    } else if (radioVal.value == '4') {
      if (!phone.value) {
        Taro.showToast({
          icon: 'error',
          title: '请填写手机号'
        })
        return
      } else {
        const phoneRegex = /^1[3456789]\d{9}$/
        if (!phoneRegex.test(phone.value)) {
          Taro.showToast({
            title: '手机号格式错误',
            icon: 'error',
            duration: 1000
          })
          return
        }
        sendData = {
          returnType: 5, // 支付宝返还
          phone: phone.value // 手机号
        }
      }
    }

    emit('sendRuturnTypeMsg', sendData) // 关闭弹窗传递数据
  } else {
    emit('sendRuturnTypeMsg', null) // 关闭弹窗不传递数据
  }
}
</script>

<style lang="scss">
.returnBox {
  .flex_start {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .flex_ld {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn_box {
    .button {
      width: 218rpx;
      height: 72rpx;
      border-radius: 88rpx;
    }
  }

  .title {
    width: 150rpx;
  }

  .dot {
    color: red;
    margin-left: 10rpx;
  }

  .nut-input {
    width: 400rpx;
    padding: 0;
  }

  .nut-tabs.vertical .nut-tabs__titles-item.active .nut-tabs__titles-item__line {
    left: 0rpx;
    width: 6rpx;
    background: #0966ff;
  }

  .nut-cell {
    margin: 0;
  }

  .nut-tab-pane {
    padding: 0;
  }

  .nut-radio-group {
    display: block;
  }

  .nut-radio__button {
    width: 210rpx;
    height: 72rpx;
    border-radius: 88rpx;
    justify-content: center;
  }

  .nut-switch {
    background: #0966ff;
  }

  .nut-radio__button--active {
    color: #0966ff;
    font-weight: bold;
  }

  .nut-radio__button--active {
    color: var(--nut-radio-label-font-active-color, var(--nut-primary-color, #0966ff));
    border: 2rpx solid var(--nut-radio-label-button-border-color, var(--nut-primary-color, #0966ff));
  }

  .nut-radio__button--active::after {
    border-radius: 88rpx;
    background-color: var(--nut-radio-label-button-background, var(--nut-primary-color, #0966ff));
  }
  .nut-radio-group--horizontal .nut-radio {
    margin: 8rpx ;
  }
}
</style>
